<template>
  <div class="userOption" @click.stop="">
    <div class="info">
      <div class="left">
        <el-avatar :src="item.avatar" shape="square" :size="45"></el-avatar>
      </div>
      <div class="right">
        <span v-if="nickname" class="nickname">备注: {{ nickname }}</span>
        <span class="username shallow"
          >{{ item.type === 'user' ? '昵称' : '群昵称' }}:{{ item.name }}</span
        >
        <span v-if="item.sign" class="shallow"> 签名:{{ item.sign }}</span>
        <span v-if="item.area" class="shallow">地区:{{ item.area }}</span>
      </div>
    </div>
    <div class="option">
      <!-- 显示群头像 -->
      <div v-if="item.type === 'group'" class="avatar">
        <div class="avatar_list">
          <template v-for="a in item.group_users" :key="a.id">
            <el-avatar
              :src="a.user.avatar"
              shape="circle"
              :size="45"
            ></el-avatar>
          </template>
        </div>
        <span class="avatar_num shallow"
          >共{{ item.group_users.length }}人</span
        >
      </div>
      <!-- 修改备注 -->
      <label for="nickname" class="name"
        >{{ item.type === 'user' ? '备注' : '群昵称' }}
        <el-input
          v-model="name"
          :placeholder="placeholder"
          @blur="editName"
        ></el-input>
      </label>
      <!-- 修改群公告 -->
      <label for="ramark" class="name"
        >群公告
        <el-input
          v-model="remark"
          placeholder="修改群公告"
          @blur="editRemark"
        ></el-input>
      </label>
      <!-- 看他看我 -->
      <div v-if="item.type === 'user'" class="look">
        <div class="lookme">
          <span>看我</span>
          <el-switch v-model="lookme" @change="editLook"></el-switch>
        </div>
        <div class="lookhim">
          <span>看他</span>
          <el-switch v-model="lookhim" @change="editLook"></el-switch>
        </div>
      </div>
    </div>
    <div class="btns">
      <el-button type="danger" size="small">{{ deleteText }}</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'

const emit = defineEmits(['editName', 'editLook'])

const props = defineProps({
  item: {
    type: Object,
    default: () => ({})
  }
})
const name = ref('') // 修改备注
const nickname = ref(props.item.nickname) // 备注
const lookme = ref(props.item.lookme) // 看我
const lookhim = ref(props.item.lookhim) // 看他
const remark = ref(props.item.remark) // 群公告

// 计算input提示文字
const placeholder = computed(() => {
  return props.item.type === 'user' ? '修改好友备注' : '修改群名称'
})
// 计算删除按钮的文字
const deleteText = computed(() => {
  return props.item.type === 'user' ? '删除好友' : '退出群聊'
})

// 修改群名称或者好友备注
const editName = () => {
  emit('editName', {
    name: name.value,
    type: props.item.type,
    id: props.item.friend_id || props.item.friend_id,
    f_g_id: props.item.id
  })
}

// 修改看我和看他
const editLook = () => {
  emit('editLook', {
    lookme: lookme.value,
    lookhim: lookhim.value,
    id: props.item.friend_id
  })
}

// 修改群公告
const editRemark = () => {}
</script>

<style lang="scss" scoped>
.userOption {
  font-size: 14px;
  width: 200px;

  .info {
    display: flex;
    .left {
      margin-right: 10px;
    }
    .right {
      display: flex;
      justify-content: center;
      flex-direction: column;

      .username {
        width: 150px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }

  .option {
    margin-top: 15px;

    .name {
      margin-top: 15px;

      display: flex;
      align-items: center;
      white-space: nowrap;
      .el-input {
        margin-left: 5px;
        border-bottom: 1px solid #eee;
        ::v-deep .el-input__wrapper {
          box-shadow: none;
        }
      }
    }

    .look {
      div {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
    }

    .avatar {
      display: flex;
      align-items: center;
      cursor: pointer;
      margin-top: 15px;
      .avatar_list {
        width: 150px;
        display: flex;
        overflow: hidden;
        .el-avatar {
          flex-shrink: 0;
          margin-right: 3px;
        }
      }

      .avatar_num {
        white-space: nowrap;
        margin-left: 10px;
      }
    }
  }

  .btns {
    display: flex;
    justify-content: center;
    margin-top: 15px;
  }
}
</style>
